<template>
	<view>
		<view class="wrap">
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change"
					:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">


				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<view class="page-box">

							<view class="order" v-for="(res, index) in orderList[0]" :key="res.id">

								<view class="item">
									<view class="left">
										<image :src="res.shop.image[0]" mode="aspectFill" @click="go(res)"></image>
									</view>
									<view class="content">
										<view class="title u-line-2">{{ res.shop.title }}</view>
										<view class="type">{{ res.shop.desc }}</view>
										<view class="delivery-time">发货时间 付款后7天内发货</view>
									</view>
									<view class="right">
										<view class="price">
											￥{{ res.shop.price }}
										</view>
										<view class="number">x{{ res.quantity }}</view>
									</view>
								</view>


								<view class="total">
									共{{ res.quantity }}件商品 合计:
									<text class="total-price">
										￥{{ res.quantity*res.shop.price }}
									</text>
								</view>
								<view class="bottom">
									<view class="more">
										<u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon>
									</view>
									<view class="" style="display: flex;">
										<view class="exchange btn" @click="open(res.id)">取消订单</view>
										<view class="evaluate btn"
											@click="showPop(true,res.quantity*res.shop.price,1,res.id)">付款
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>




				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<view class="page-box">


							<view class="order" v-for="(res, index) in orderList[1]" :key="res.id">

								<view class="item">
									<view class="left">
										<image :src="res.shop.image[0]" mode="aspectFill"  @click="go(res)"></image>
									</view>
									<view class="content">
										<view class="title u-line-2">{{ res.shop.title }}</view>
										<view class="type">{{ res.shop.desc }}</view>
										<view class="delivery-time">发货时间 付款后7天内发货</view>
									</view>
									<view class="right">
										<view class="price">
											￥{{ res.shop.price }}
										</view>
										<view class="number">x{{ res.quantity }}</view>
									</view>
								</view>


								<view class="total">
									共{{ res.quantity }}件商品 合计:
									<text class="total-price">
										￥{{ res.quantity*res.shop.price }}
									</text>
								</view>
								<view class="bottom">
									<view class="more">
										<u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon>
									</view>
									<view class="logistics btn" @click="gouwuliu()">查看物流</view>
									<view class="evaluate btn" @click="showPopsh(2,res.id)">收货</view>
								</view>
							</view>
							<u-loadmore :status="loadStatus[1]" bgColor="#f2f2f2"></u-loadmore>
						</view>
					</scroll-view>
				</swiper-item>




				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<view class="page-box">
							<view class="order" v-for="(res, index) in orderList[2]" :key="res.id">

								<view class="item">
									<view class="left">
										<image :src="res.shop.image[0]" mode="aspectFill"  @click="go(res)"></image>
									</view>
									<view class="content">
										<view class="title u-line-2">{{ res.shop.title }}</view>
										<view class="type">{{ res.shop.desc }}</view>
										<view class="delivery-time">7天无理由退货</view>
									</view>
									<view class="right">
										<view class="price">
											￥{{ res.shop.price }}
										</view>
										<view class="number">x{{ res.quantity }}</view>
									</view>
								</view>


								<view class="total">
									共{{ res.quantity }}件商品 合计:
									<text class="total-price">
										￥{{ res.quantity*res.shop.price }}
									</text>
								</view>
								<view class="bottom">
									<view class="more">
										<u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon>
									</view>
									<view class="exchange btn" @click="open(res.id)">删除</view>
									<view class="evaluate btn" @click="pl">评价</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>




			</swiper>
		</view>
		<u-keyboard default="" ref="uKeyboard" mode="number" :mask="true" :mask-close-able="false" :dot-enabled="false"
			v-model="show" :safe-area-inset-bottom="true" :tooltip="false" @change="onChange" @backspace="onBackspace">
			<view>
				<view class="u-text-center u-padding-20 money">
					<text>{{pic}}</text>
					<text class="u-font-20 u-padding-left-10">元</text>
					<view class="u-padding-10 close" data-flag="false" @tap="showPop(false)">
						<u-icon name="close" color="#333333" size="28"></u-icon>
					</view>
				</view>
				<view class="u-flex u-row-center">
					<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password"
						:disabled-keyboard="true" @finish="finish"></u-message-input>
				</view>
				<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
			</view>
		</u-keyboard>
		<u-modal v-model="show1" :content="content" show-cancel-button @confirm="qd()"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '是否确认删除',
				qx_id: "",
				show1: false,
				pic: "",
				show: false,
				password: '',
				orderList: [
					[],
					[],
					[]
				],

				list: [{
						name: '待付款'
					},
					{
						name: '待收货'
					},
					{
						name: '已收货'
					}
				],
				current: 0,
				swiperCurrent: 0,
				order_state:0,
				tabsHeight: 0,
				dx: 0,
				loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
			};
		},
		onLoad() {
			this.getOrderList(0);
			this.getOrderList(1);
			this.getOrderList(2);
		},
		computed: {},
		methods: {
			gouwuliu(){
				uni.navigateTo({
					url:"../wuliu/wuliu"
				});
			},
			go(id){
				console.log(id)
				uni.navigateTo({
					url:`../submitBar/index?title=${id.shop.title}&image=${id.shop.image}&desc=${id.shop.desc}&price=${id.shop.price}&type_id=${id.shop.type_id}&id=${id.shop.id}`
				});
			},
			pl(){
				uni.showToast({
					title: "暂不支持",
					duration: 2000,
					icon:"error"
				});
			},
		async	showPopsh(order_state,id){
				let {
					data: res
				} = await this.$http(`userOrder/${id}`, "put", this
					.vuex_token, {order_state:order_state})
				uni.showToast({
					title: "收货成功",
					duration: 2000
				});
				this.getOrderList(1);
				console.log(res.data)
			},
			async qd() {
				let {
					data: res
				} = await this.$http(`userOrder/${this.qx_id}`, "delete", this
					.vuex_token, {})
				uni.showToast({
					title: res.data.msg,
					duration: 2000
				});
				this.getOrderList(0);
				this.getOrderList(2);
				console.log(res.data)
			},
			async getlist() {
				let {
					data: res
				} = await this.$http(`userOrder/${this.qx_id}`, "put", this
					.vuex_token, {order_state:this.order_state})

				this.getOrderList(0);
				console.log(res.data)
			},
			open(id) {
				this.qx_id = id
				this.show1 = true;
			},
			onChange(val) {
				if (this.password.length < 6) {
					this.password += val;
				}

				if (this.password.length >= 6) {
					this.pay();
				}
			},
			onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
			pay() {
				uni.showLoading({
					title: '支付中'
				})
				this.getlist()
				setTimeout(() => {
					uni.hideLoading();
					this.show = false;
					uni.showToast({
						icon: 'success',
						title: '支付成功'
					})

				}, 2000);
			},
			showPop(flag = true, pic, order_state, id) {
				this.order_state=order_state
				this.qx_id=id
				this.pic = pic
				// console.log("123")
				this.password = '';
				this.show = flag;
			},
			finish() {
				console.log(11111)
			},
			// 页面数据
			async getOrderList(idx) {
				let {
					data: res
				} = await this.$http(`orderState?user_id=${this.vuex_userid}&order_state=${idx}`, "get", this
					.vuex_token, {})
					res.data.forEach(item => {
						console.log(item)
						item.shop.image = item.shop.image.split(',')
					})
				console.log(res.data)
				this.orderList[idx] = res.data
				this.loadStatus.splice(this.current, 1, "loadmore")
			},
			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
				this.getOrderList(index);
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			}
		}
	};
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #f2f2f2;
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	.money {
		font-size: 80rpx;
		color: $u-type-warning;
		position: relative;

		.close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			line-height: 28rpx;
			font-size: 28rpx;
		}
	}

	.tips {
		color: $u-tips-color;
	}

	.order {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;

		.item {
			display: flex;
			margin: 20rpx 0 0;

			.left {
				margin-right: 20rpx;

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}
			}

			.content {
				width: 380rpx;


				.title {
					font-size: 28rpx;
					line-height: 50rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.delivery-time {
					color: #e5d001;
					font-size: 24rpx;
				}
			}

			.right {
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;

				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}

				.number {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
		}

		.total {
			margin-top: 20rpx;
			text-align: right;
			font-size: 24rpx;

			.total-price {
				font-size: 32rpx;
			}
		}

		.bottom {
			display: flex;
			margin-top: 40rpx;
			padding: 0 10rpx;
			justify-content: space-between;
			align-items: center;

			.btn {
				line-height: 52rpx;
				width: 160rpx;
				border-radius: 26rpx;
				border: 2rpx solid $u-border-color;
				font-size: 26rpx;
				text-align: center;
				color: $u-type-info-dark;
			}

			.evaluate {
				color: $u-type-warning-dark;
				border-color: $u-type-warning-dark;
			}
		}
	}

	.centre {
		text-align: center;
		margin: 200rpx auto;
		font-size: 32rpx;

		image {
			width: 164rpx;
			height: 164rpx;
			border-radius: 50%;
			margin-bottom: 20rpx;
		}

		.tips {
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}

		.btn {
			margin: 80rpx auto;
			width: 200rpx;
			border-radius: 32rpx;
			line-height: 64rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
		}
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}
</style>
